<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function() {
				$(".validate").blur(function() {
					let reg = new RegExp("^" + this.pattern + "$", 'ig');
					if (reg.test(this.value)) {
						$(this).next().html("");
					} else {
						$(this).next().html($(this).next().attr("err-msg"));
					}
				});
			});
			$(":password[name=repassword]").blur(function() {
				let pa = $("[name=password]").val();
				if (pa != this.value) {
					$(this).next().html("两次密码输入不一致！");
				} else {
					$(this).next().empty();
				}
			});
			$(":submit").click(function() {
				if ($("[name=accept]").is(":checked") == false) {
					$("[name=accept]").next().html("必须同意协议");
					return false;
				}
				return true;
			});
		
		</script>
	</head>
	<body>
		<form>
			<p>
				<input type="email" name="email" class="validate" placeholder="请输入您的常用邮箱" required
					pattern="[a-zA-Z0-9_-]+" /><span >请输入您的常用邮箱</span>
			</p>
			<p>
				<input type="text" name="username" class="validate" placeholder="请输入昵称" required
					pattern="[\u4e00-\u9fa5|a-zA-Z0-9]{4,12}" /><span>4-12位字符、英文、数字或者中文均可</span>
			</p>
			<p>
				密码：<label><input type="password" name="password" class="validate" placeholder="请输入密码" required
						pattern="[\u4e00-\u9fa5|a-zA-Z0-9]{6,16}" /></label>
				<span>6-16位字符或数字、字母,区分大小写</span>
			</p>
			<p>
				再次输入密码：<label><input type="password" name="repassword" class="validate" placeholder="请再次输入密码" required
						pattern="[\u4e00-\u9fa5|a-zA-Z0-9]{6,16}"/></label>
							<span err-msg=" 两次输入的密码不一致"></span>
			</p>
			<p>
				验证码：<label><input type="number" name="yanzhengma" class="validate" placeholder="请输入验证码	" required
						pattern="[\u4e00-\u9fa5|a-zA-Z0-9]{6,16}" /></label>
				<span>不区分大小写，点击图片可更换</span>
			</p>
			<p>
				<input type="checkbox" name="accept" value="yes" required /><a>同意用户服务条款</a>
			</p>
			<p>
				<button type="submit">注册</button>
			</p>
		</form>
	</body>
</html>
